<script lang="ts" setup>
import Captcha from './components/captcha.vue';
import CountToDemo from './components/count-to-demo.vue';
import Download from './components/download.vue';
import NumberPrecision from './components/number-precision.vue';
import UploadDemo from './components/upload-demo.vue';
import WangEditor from './components/wang-editor.vue';
import Description from './components/description.vue';
import ThemeColor from './components/theme-color.vue';
import CheckCardDemo from './components/check-card-demo.vue';
import ProSelectDemo from './components/select-demo.vue';

const activeTab = ref('CheckCard');

const iconName = ref('');

defineOptions({ name: 'TemplateDev' });
</script>

<template>
  <AppPage>
    <Captcha />
    <PageCard title="ProTabs">
      <ProTabs v-model="activeTab" tab-position="top">
        <template #operate>
          <el-tooltip content="pro-tabs组件新增右侧插槽，重置为选项卡样式" placement="top">
            <el-button>新增</el-button>
          </el-tooltip>
          <el-button type="danger">删除</el-button>
        </template>
        <el-tab-pane name="ProSelect" label="ProSelect">
          <ProSelectDemo />
        </el-tab-pane>
        <el-tab-pane name="CheckCard" label="CheckCard">
          <CheckCardDemo />
        </el-tab-pane>
        <el-tab-pane name="CountTo" label="CountTo">
          <CountToDemo />
        </el-tab-pane>
        <el-tab-pane name="Download" label="Download">
          <Download />
        </el-tab-pane>
        <el-tab-pane name="NumberPrecision" label="NumberPrecision">
          <NumberPrecision />
        </el-tab-pane>
        <el-tab-pane name="WangEditor" label="WangEditor">
          <WangEditor />
        </el-tab-pane>
        <el-tab-pane name="UploadDemo" label="UploadDemo">
          <UploadDemo />
        </el-tab-pane>
        <el-tab-pane name="Description" label="Description">
          <Description />
        </el-tab-pane>
        <el-tab-pane name="IconSelect" label="IconSelect">
          <IconSelect v-model="iconName" />
        </el-tab-pane>
        <el-tab-pane name="ThemeColor" label="ThemeColor">
          <ThemeColor />
        </el-tab-pane>
      </ProTabs>
    </PageCard>
  </AppPage>
</template>
